﻿<template>
  <div class="header-share-module">
    <popup v-model="showSharePopup" position="bottom">
      <div class="share_list">
        <div class="item" @click="share('wechatFriends')">
          <span>微信</span>
        </div>
        <div class="item" @click="share('wechatMoments')">
          <span>朋友圈</span>
        </div>
        <div class="item" @click="share('qq')">
          <span>QQ</span>
        </div>
        <div class="item" @click="share('link')">
          <span>复制链接</span>
        </div>
      </div>
      <div class="share_bottom"></div>
      <div class="share_cancel" @click="hidePopup">
        取消
      </div>
    </popup>
  </div>
</template>
<script>
import { mapGetters, mapMutations } from 'vuex'
import tool from '@/util/tool'
import { Toast, Popup } from 'vant'
import { MOBILE_PAGE_HOST } from '@/config/default'

export default {
  name: 'HeaderBarModule',
  components: {
    Popup,
  },
  props: {
    componentId: {
      type: String,
      default:''
    },
    activityCode: {
      type: String,
      default:''
    },
    scrollHeight: {
      type: Number,
      default:0
    },
    title: {
      type: String,
      default:''
    },
  },
  data () {
    return {
      showSharePopup: false,
    }
  },

  computed: {
    ...mapGetters('main', ['pageContent']),
  },
  methods: {
    ...mapMutations('main', ['editComponent']),
    hidePopup () {
      this.showSharePopup = false
    },
    openPopup () {
      this.showSharePopup = true
    },
    share (type) {
      let self = this
      let shareUrl =
        MOBILE_PAGE_HOST+'/mobile?userNo=&navStyle=light&gestureAble=Y&activityCode=' +
        tool.getUrlParam('activityCode')
      let title = this.pageContent.shareTitle
        ? this.pageContent.shareTitle
        : '特惠活动火热进行中！好物特价限时享，更有海量优惠券等你来领！赶快点击抢购吧！'
      let desc = this.pageContent.shareDesc
        ? this.pageContent.shareDesc
        : '零首付费率超低，最高24期随心分期'
      let icon = this.pageContent.shareIcon
        ? this.pageContent.shareIcon
        : '------'
      let shareData = {
        title: title,
        description: desc,
        href: shareUrl,
        image: icon,
        type: type
      }
      window.App.share &&
        window.App.share({
          data: shareData,
          callback: function (e) {
            self.showSharePopup = false
            if (type === 'link') {
              Toast('复制成功')
            } else {
              if (e.data.status === 'end') {
                Toast('分享成功')
              }
            }
          },
        })
    },
  }
}
</script>
<style lang="less" scoped>
.header-share-module {
  .share_list {
    height: 116px;
    background: rgba(255, 255, 255, 1);
    display: flex;
    align-items: center;
    .item {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      img {
        display: block;
        width: 45px;
        height: 45px;
      }
      span {
        display: block;
        margin-top: 10px;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(147, 148, 153, 1);
      }
    }
  }
  .share_bottom {
    height: 10px;
    background: rgba(245, 245, 245, 1);
  }

  .share_cancel {
    height: 55px;
    background: rgba(255, 255, 255, 1);
    line-height: 55px;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
    text-align: center;
  }
}
</style>
